<template>
  <div class="uploading-realname">
     <div class="container">
        <div class="form-box">
          <el-form ref="userinfoForm" :model="userinfoForm" label-width="100px">
            <el-form-item label="用户编号">
                <el-input disabled v-model="userinfoForm.userid"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名">
                <el-input disabled v-model="userinfoForm.realname"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码">
                <el-input v-model="userinfoForm.idcard"></el-input>
            </el-form-item>
             <el-form-item label="">
                <el-button type="danger" @click="submitRealinfo">实名信息</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="upload-box">
          <!-- <div>
            <span>手机号</span>
             <el-input v-model="userinfoForm.phone"></el-input>
          </div> -->
          <div class="upload-info">
              <span style="display:inline-block;width:140px;">手机号码：</span>
              <el-input  v-model="userinfoForm.phone"></el-input>
            </div>
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="uploadInfo.action"
            :limit="3"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
            :data="filedata"
            :auto-upload="false">       
            <div slot="tip" class="el-upload__tip">请上传真实的照片(只能上传jpg/png文件，且不超过500kb)</div>
            <div class="upload-info">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            </div>
          </el-upload>
        </div>
        
      </div>  
  </div>
</template>

<script>
export default {
  name:'uploading-realname',
  props:{
      cell:{
          type:Object,
          default:function(){
              return {}
          }
      }
  },
  data () {
    return {
        uploadInfo:{
           action: "http://ds.jiepaypal.cn:8765/v1.0/user/upload/realname"
        },
        userinfoForm:{
          userid:null,
          realname:null,
          idcard:null,
          phone:null
        },
        fileList:[],
        filedata:{}
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    handlePreview(){
       // 上传前
    },
    handleRemove(){
      // 删除前
    },
    submitUpload(){
      // 提交文件
      this.$refs.upload.submit();
    },
    submitRealinfo(){
      // 提交信息
      this.filedata.phone = this.userinfoForm.phone;
      let url =`paymentchannel/realname/auth/backstage`,
          params = `realname=${this.userinfoForm.realname}&idcard=${this.userinfoForm.idcard}&userid=${this.userinfoForm.userid}`;
      this.$Http.post(url,params).then(res=>{
        if(res.data.resp_code ==="000000"){
          this.$message({
            type:"success",
            message:res.data.resp_message
          })
        }else{
          this.$notify.info({
              title: '提示',
              message: res.data.resp_message
          }); 
        }
      }).catch(err =>{
        this.$notify.error({
            title: '提示',
            message: "提交失败！"
        }); 
      }) 
    }
  }
}

</script>
<style scoped>
.container{
  min-width: 300px;
  min-height: 300px;
  padding: 20px 40px;
}
.upload-box{
  min-height: 200px;
  padding-top: 20px;
}
.upload-info{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 15px ;
}
</style>